<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 相册 </el-breadcrumb-item>
        <el-breadcrumb-item>发布相册</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="form-box">
        <el-form ref="form"
                 label-width="80px">
          <el-form-item label="相册描述">
            <el-input type="textarea"
                      rows="5"
                      v-model="photo.content"></el-input>

          </el-form-item>
          <el-form-item label="上传图片">
            <el-upload action="http://192.168.12.95:8080/photo/upload"
                       list-type="picture-card"
                       :on-preview="handlePictureCardPreview"
                       :on-remove="handleRemove"
                       :headers="token"
                       :on-success="uploadsuccess">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%"
                   :src="dialogImageUrl"
                   alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item label="操作：">
            <el-button type="primary"
                       @click="onSubmit">提交</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'baseform',
    data() {
        return {
            token: '',
            //相册对象
            photo: {
                //图片集合
                img: [],
                content: ''
            },
            //上传组件
            dialogImageUrl: '',
            dialogVisible: false
        };
    },
    created() {
        this.token = {
            token: localStorage.getItem('token')
        };
    },
    methods: {
        //确认发布
        onSubmit() {
            if (this.photo.content == null || this.photo.content == '') {
                this.$message({
                    type: 'error',
                    message: '描述不能为空'
                });
            } else if (this.photo.img.length == 0) {
                this.$message({
                    type: 'error',
                    message: '图片不能为空'
                });
            } else {
                this.$axios.post('/photo/admin/add', this.photo).then((r) => {
                    this.photo.content = '';
                    this.photo.img=[]
                });

                location.reload();
            }
        },
        //移除选中的照片
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        //预览
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        //将图片地址放进img集合
        uploadsuccess(response, file, fileList) {
            this.photo.img.push(response.data);
        },
        //取消（清空内容）
        cancel() {
            this.photo.content = '';
        }
    }
};
</script>